$(function () {




    let queryString = location.search.slice(1)

    let arr = queryString.split("=")

    var id = arr[1]

    console.log(id)

    console.log(id)
    $.get("/lession05/getDataById", { id }, function (data) {
        console.log(data)
        $("#panel").html(`
        <div class="col-4" id="fdjbox">
        <div id="fdj" class="fdj">
            <img draggable="false" src="${data.data.goods_small_logo}" alt="">
            <div id="box" class="box">
            </div>
            <div id="big" class="big">
                <img id="bigImg" src="${data.data.goods_big_logo}" alt="">
            </div>
        </div>
        </div>
        <div class="col-6 infos">
            <h3>${data.data.goods_name}</h3>
            <div class="p-3 bg-secondary">
                <span class="text-white">千锋价:</span><span class="text-danger">¥${data.data.goods_price}</span>
            </div>
            <button type="button" id="addBtn" class="btn btn-lg btn-primary" >加入购物车</button>
        </div>
        <div class="ad col-2" style="overflow: hidden">
            看了又看
        </div>
        <div class=" container position-fixed top-50 start-50 translate-middle" id= "nonebox" style="width: 500px;">
        <div class="row nonebox">
           
            <div>
             <form>
                 <div class="mb-3">
                     <label for="exampleInputEmail1" class="form-label">用户账号</label>
                     <input type="email" class="form-control" id="exampleInputEmail2" aria-describedby="emailHelp">
                    
                 </div>
                 <div class="mb-3">
                     <label for="exampleInputPassword2" class="form-label">登录密码</label>
                     <input type="password" class="form-control" id="exampleInputPassword1">
                 </div>
               
                 <button type="submit" id="noneBtn" class="btn btn-primary">登录</button>
             </form>
            </div>
           
         </div>
       </div>
        `)

        /*   $.get("/lession05/getAllData", function (data) {
              let str = ``
              console.log(data)
              for (var i = 0; i < data.data.length; i++) {
                  str += `
                 
                  `
              }
              $(".ad").html(str)
  
          }) */


        let username = localStorage.getItem("username")
        if (username) {

        }




        $("#addBtn").click(function () {

            let username = localStorage.getItem("username")

            if (username) {
                $.get("/lession05/addToCart", { id }, function (data) {
                    console.log(data)
                    pxmu.success("加入成功")

                    $(".nonebox").css("display", function () { return "none"; })
                    
                })
            } else {
                console.log($(".nonebox"))
                pxmu.success("请先登录")
                $(".nonebox").css("display", function () { return "block"; })
                $("#noneBtn").click(function () {

                    var username = $("#exampleInputEmail2").val()

                    var password = $("#exampleInputEmail2").val()


                    $.post("/lession05/login", { username, password }, function (data) {
                        localStorage.setItem("username", username);
                        if (!data.error) {

                            $(".nonebox").css("display", function () { return "none"; })
                            location.reload()
                        }
                    })

                })



            }


            console.log(id)

        })



        var box = document.getElementById("box");
        var fdj = document.getElementById("fdj");
        var big = document.getElementById("big")
        var bigImg = document.getElementById("bigImg");

        var r = 348 / 800

        // 鼠标进入事件
        fdj.onmouseenter = function () {
            // 显示
            box.style.display = "block";
            big.style.display = "block"
        }
        // 鼠标离开事件
        fdj.onmouseleave = function () {
            // 隐藏
            box.style.display = "none";
            big.style.display = "none"
        }

        // 添加移动事件
        fdj.onmousemove = function (e) {
            // 获取鼠标到页面的距离
            var pageX = e.pageX;
            var pageY = e.pageY;
            // 获取元素到页面的距离
            var left = offset(fdj).left;
            var top = offset(fdj).top;

            // 计算鼠标到元素的距离
            var x = pageX - left;
            var y = pageY - top;

            var x1 = x - box.clientWidth / 2
            var y1 = y - box.clientHeight / 2

            // 边界判定
            if (x1 < 0) {
                x1 = 0;
            }
            if (x1 > fdj.clientWidth - box.clientWidth) {
                x1 = fdj.clientWidth - box.clientWidth
            }

            if (y1 < 0) {
                y1 = 0;
            }
            if (y1 > fdj.clientHeight - box.clientHeight) {
                y1 = fdj.clientHeight - box.clientHeight
            }

            box.style.left = x1 + "px";
            box.style.top = y1 + "px";

            // 同时改变大图的图片
            bigImg.style.left = -x1 / r + "px";
            bigImg.style.top = -y1 / r + "px";
        }

        function offset(dom) {
            // 计算dom到页面两边的距离
            // console.log(dom);
            // 计算它的offsetTop和offsetLeft
            var left = 0;
            var top = 0;
            // 再计算它的offsetParent的offsetLeft和offsetTop 同时还有边框 clientLeft 和 clientTop
            // 层层往上 累加
            while (dom != document.body) {
                left += dom.offsetLeft + dom.clientLeft;
                top += dom.offsetTop + dom.clientTop;
                dom = dom.offsetParent;
            }
            return {
                left: left,
                top: top
            }
        }



    })


})